<template>
  <el-form
    ref="form"
    :model="form"
    :rules="rules"
    label-width="80px"
    style="width: 100%"
  >
    <el-row :gutter="20">
      <el-col :span="14">
        <el-form-item label="文章标题" prop="articleTitle">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="14">
        <el-form-item label="是否外链">
          <el-radio-group
            v-model="form.isOut"
            @change="handleOutChainFlag"
          >
            <el-radio label="1">否</el-radio>
            <el-radio label="0">是</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="14" v-show="outChainAddressStatus === '0'">
        <el-form-item label="外链地址">
          <el-input v-model="form.outHref"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import { PLEASE_INPUT } from "@/util/constant";

export default {
  props: ["configure"],
  data() {
    return {
      visible: false,
      form: {
        name: "",
        isOut: "1",
        outHref: "",
      },
      outChainAddressStatus: "1",
      rules: {
        name: [{ required: true, message: PLEASE_INPUT, trigger: "blur" }],
      },
    };
  },
  watch: {
    // configure: {
    //   handler(value) {
    //     console.log('vvvv',value)
    //     this.form.name = value.name;
    //     this.form.isOut = value.isOut;
    //     this.form.outHref = value.outHref;
    //     this.outChainAddressStatus = value.isOut;
    //   },
    //   deep: true,
    // },
    configure(data){
      this.form.name = data.name;
      this.form.isOut = data.isOut ? '0' : '1';
      this.form.outHref = data.outHref;
      this.outChainAddressStatus = data.isOut ? '0' : '1'
    },
  },
  methods: {
    getContent() {
      this.form.isOut = this.form.isOut === "0";
      return this.form;
    },
    handleOutChainFlag(value) {
      this.outChainAddressStatus = value;
      this.$emit("handleOutChainFlag", value === "0");
    },
  },
};
</script>
<style scoped>
.el-row {
  display: flex;
  flex-wrap: wrap;
}
</style>
